
// import TableList from "@components/templates/tablelist";
import TableList from "@components/templates/customtablelist";
import { HttpShipperList, HttpDeleteReceiver } from '@/service/api/views'
import { mapState, mapGetters } from "vuex";
import compAdd from './add';
import compUpdate from "./edit";
export default {
    mixins: [TableList],
    components: {
        compAdd,
        compUpdate
    },
    data () {
        return {
            title: "发货地址管理",
            // totals: 0,
            isMixin: true,
            Tools: { show: true },
            Tabs: { show: true },
            formData: {
                search: {
                }
            },
            Searchs: {
                show: true,
                labelWidth: 120,
            },
            Plugins: { show: true },
        }
    },
    methods: {
        ajaxRequest: HttpShipperList,
        interceptRequest (params) {
            if (params.search.BT_createdAt&&params.search.BT_createdAt[0]!='') {
                params.search.BT_createdAt = this.handleDateFormat(params.search.BT_createdAt[0],'yyyy-mm-dd') + ' ~ ' + this.handleDateFormat(params.search.BT_createdAt[1],'yyyy-mm-dd')
            }
            return params
        },
        handleOperates (params = "", type, batch) {
            if (batch === true) {
                params = (params || this.checkedData.join(',')) + '';
                if (!params.length) return this.$Message.warning('请选择至少一条数据');
            }
            switch (type) {
                case 'add':
                    this.operate = {
                        show: true,
                        ismanage: 0,
                        component: "compAdd",
                        title: "添加发货地址",
                        width: 660,
                        showFooter: false
                    }
                    break;
                case 'query':
                    this.operate = {
                        title: '查看',
                        show: true,
                        width: 1200,
                        component: "compUpdate",
                        activeid: params,
                        querytype: 'query',
                        showFooter: false
                    }
                    // this.$router.push({ name: 'shipperDetail', params: { id:params }, query: { type, ismanage:0 } });
                    break;
                case "queryBlank":
                    var url = this.$router.resolve({
                        name: "shipperDetail",
                        params: { id: params },
                        query: { type:'query', ismanage: 0 },
                    });
                    window.open(url.href, '_blank');
                    break;
                case 'edit':
                    this.$router.push({ name: 'shipperDetail', params: { id: params }, query: { type, ismanage: 0 } });
                    break;
                case 'delete':
                    this.operate = {
                        show: true,
                        alert: "primary",
                        params: { id: params },
                        title: "删除操作",
                        ajaxRequest: HttpDeleteReceiver
                    }
                    break;
                case 'upload':
                    this.operate = {
                        show: true,
                        title: '导入数据',
                        action: global.APIURL_HOST + "/api/jwt/spl/shipper/upload",
                        name: "file",
                        component: "compUpload",
                        download: process.env.VUE_APP_APIURL_SHIP + '/api/jwt/spl/shipper/downloadTemplate',
                    }
                    break;
                case 'download':
                    this.handleWebfs(
                        process.env.VUE_APP_APIURL_SHIP + "/api/jwt/spl/shipper/export", {},
                        "download"
                    );
                    break;

            }
        },
        getOperateNodeMap (row) {
            const { id } = row
            return [{
                label: this.$ct('global.common.query', { defaultValue: '查看' }),
                show: true,
                params: id,
                operate: 'query'
            }, {
                label: this.$ct('global.common.operation_edit', { defaultValue: '编辑' }),
                show: true,
                params: id,
                operate: 'edit'
            }]
        },
    },
    computed: {
        // 搜索下拉框展示内容
        SearchsData () {
            return [
                {
                    label: '发货方',
                    tag: 'Input',
                    key: 'CN_contactName',
                    show: true,
                },

                {
                    label: '状态',
                    key: 'EQ_active',
                    tag: 'Select',
                    options: [
                        { label: '启用', value: 1 },
                        { label: '禁用', value: 0 },
                    ],
                    show: true,
                },
                {
                    label: '创建时间',
                    tag: 'DatePicker',
                    key: 'BT_createdAt',
                    // hideSearchTip:true,
                    props: {
                        options:this.options,
                        type: 'daterange',
                        confirm: false,
                    },
                    style: 'width:200px',
                    show: true,
                },
            ]
        },
        // ToolsData () {
        //     return [
        //         {
        //             name: "添加",
        //             theme: 'primary',
        //             operate: 'add',
        //         },
        //         {
        //             name: "导入",
        //             theme: 'info',
        //             operate: 'upload',
        //         },
        //         {
        //             name: "导出",
        //             theme: 'success',
        //             operate: 'download',
        //         },
        //     ]
        // },
        // table的展示数据
        columns () {
            return [
                {
                    title: "NO",
                    key: "NO",
                    width: 60,
                    type: "index",
                    align: 'center',
                }, {
                    title: "操作",
                    width: 90,
                    render: this.getOperateNodes,

                },
                {
                    title: "发货方名称",
                    key: "contactName",
                    minWidth: 120,
                    sortable: true,
                    render:(h,{row})=>{
                        return <div>
                            <div>
                                <a onClick={this.handleOperates.bind(this, row.id, 'query')}>{row.contactName || '--'}</a>
                                <a onClick={this.handleOperates.bind(this, row.id, 'queryBlank')}><Icon class="margin-left-10 font-14" type="ios-browsers-outline" /></a>
                            </div>
                        </div>
                    }
                }, {
                    title: "发货方CODE",
                    key: "code",
                    minWidth: 120,
                    sortable: true,
                }, {
                    title: "发货方联系方式",
                    key: "contactPhone",
                    minWidth: 120,
                }, {
                    title: "发货方地址",
                    key: "countrycode",
                    minWidth: 120,
                    render (h, { row }) {
                        let address = `${row.countrycode} ${row.state}  ${row.city}  ${row.addressLine1 || ''}`;
                        return h('span', address)
                    }
                }, {
                    title: "状态",
                    minWidth: 100,
                    key: "active",
                    render: (h, { row }) => {
                        return <div>
                            <Tag type="border" v-show={row.active === 1} color="success">启用</Tag>
                            <Tag type="border" v-show={row.active !== 1} color="error">禁用</Tag>
                        </div>
                    }
                }, {
                    title: "备注",
                    key: "remark",
                    minWidth: 120,
                }, {
                    title: "创建人",
                    key: "createdName",
                    minWidth: 120,
                }, {
                    title: "创建时间",
                    minWidth: 120,
                    key: "createdAt",
                    sortable: true,
                }]
        },

    },

};
